<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .top{
      background-color: #ff5c45;
      height: 30px;
      width: 100px;
    }
    .bottom{
      background-color: #5c45ff;
      height: 90px;
      width: 100px;
      display: none;
    }
  </style>
</head>
<body>
<div class="top"></div>
<div class="bottom"></div>
<script>
  var top = document.querySelector('.top');
  var bottom = document.querySelector('.bottom');

  top.onmouseover = function () {
    bottom.style.display = 'block'
  }
  top.onmouseout = function () {
    bottom.style.display = 'none'
  }
</script>
</body>
</html>